<template>
  <div class="collection">
    <!-- 头部导航 -->
    <div class="header">
      <van-icon class="left" name="arrow-left" @click="$router.go(-1)" />
      <div class="center">{{ playerLists.name }}</div>
      <div
        class="right iconfont icon-search"
        @click="$router.push('/search')"
      ></div>
    </div>
    <!-- 歌曲列表 -->
    <div class="card">
      <div class="head" @click="setIdFrist">
        <van-icon name="play-circle-o" />
        播放全部<span>(共{{ length }}首)</span>
      </div>
      <div
        class="song"
        v-for="(item, index) in playerLists.tracks"
        :key="item.id"
        @click="setId(item.id)"
      >
        <div class="num">{{ index + 1 }}</div>
        <div class="right">
          <div class="up">{{ item.name }}</div>
          <div class="down">{{ item.ar[0].name }} - {{ item.al.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPlaylistDetail } from "@/api/rank";
export default {
  data() {
    return {
      uid: localStorage.getItem("uid"),
      playerLists: [],
      id: this.$route.params.id, //歌单id
      length: 0,
    };
  },
  methods: {
    setId(id) {
      console.log("歌曲", id);
      this.$emit("get-player-id", id);
      this.$emit("update:cloudList", this.playerLists.tracks);
    },
    // 播放全部
    setIdFrist() {
      this.$emit("get-player-id", this.playerLists.tracks[0].id);
      this.$emit("update:cloudList", this.playerLists.tracks);
    },
    async getUserPlaylist() {
      const data = await getPlaylistDetail(this.id);
      this.playerLists = data.playlist;
      console.log(this.playerLists);
      this.length = data.playlist.tracks.length;
    },
  },
  created() {
    this.getUserPlaylist();
  },
};
</script>

<style lang="less" scoped>
.collection {
  height: 100vh;
  background: url("../../assets/bg.webp") no-repeat;
  background-size: 100%;
  .header {
    color: #191515;
    font-weight: 600;
    height: 5.5vh;
    font-weight: 600;
    line-height: 39px;
    display: flex;
    text-align: center;
    .left {
      margin-top: 10px;
    }
    .left,
    .right {
      flex: 0 0 40px;
      font-size: 18px;
    }
    .center {
      flex: 1;
    }
  }
  .card {
    height: 94.5vh;
    overflow-x: hidden;
    font-size: 15px;
    line-height: 15px;
    border-radius: 7px;
    .head {
      padding: 9px 14px;
      color: #484a4a;
      .van-icon {
        margin-right: 11px;
      }
      span {
        line-height: 16px;
        height: 16px;
        font-size: 14px;
        color: #191515;
      }
    }
    .song {
      padding: 12px 14px 9px;
      height: 55px;
      align-items: center;
      display: flex;
      .num {
        font-size: 11px;
        width: 31px;
        padding-left: 4px;
        color: #484a4a;
      }
      .right {
        width: 80%;
        .up {
          width: 80%;
          font-size: 16px;
          margin-bottom: 7px;
          color: #171d1d;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: keep-all;
        }
        .down {
          width: 80%;
          font-size: 11px;
          color: #4f4545;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: keep-all;
        }
      }
    }
  }
}
</style>
